<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
<%@ include file="/common/common-css.jsp" %>
<script>
		cmdList = "/phoneMessageStatistical/queryInfo.action";
</script>
<style>
		#jquery-table td{cursor:pointer !important}
		.load_bg{background:#000;opacity:0.1;left:0px;top:0px;position:fixed;height:100%;width:100%;overflow:hidden;z-index:10000;}
		.load_img{left:50%;top:180px;position:fixed;height:50px;overflow:hidden;z-index:20000;}
		</style>
	</head>
<body  class="no-skin">

<div  class="load_bg" style="display:none"></div>
<img src="http://img.xmiles.cn/commentloading.gif" class="load_img" style="display:none"/>
	<div class="page-content">
				<form id="queryForm" action="${cmdList}">
					<div class="page-content-area">
						<div class="row">
							 <div class="col-sm-12">
								<div class="widget-box" style="border:0px solid #ccc; border-top:none;border-bottom:none;margin-top:15px;">
								<hr style="margin-top:0px;margin-bottom:0x">
								<div class="widget-header widget-header-blue widget-header-flat">
										<h4 class="widget-title">短信服务统计</h4>
										<div class="widget-toolbar">
											<a href="#" data-action="collapse">
												<i class="ace-icon fa fa-chevron-up"></i>
											</a>
										</div>
									</div>
									<div class=" widget-body">
												<!-- <div class="widget-main" style="padding:12px;border:0px solid #ccc; border-top:none;border-bottom:none;"> -->
														
														<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
															<label class="col-sm-4 control-label"
																style="text-align: right" for="sex">日期:</label>
															<div class="col-sm-8">
																<div class="input-daterange input-group">
																	<input type="text" data-date-format="yyyy-mm-dd"
																		class="date-picker input-sm form-control"
																		style="padding-left: 0px" name="startTime" id="startTime"> <span
																		class="input-group-addon" style="width: 6px"> <i
																		class="fa fa-exchange"></i>
																	</span> <input type="text" data-date-format="yyyy-mm-dd"
																		class="date-picker input-sm form-control"
																		style="padding-left: 0px" name="endTime" id="endTime">
																</div>
															</div>
														</div>
														
														
														
														
														<div class="widget-main" >
																<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
																<label class="col-sm-6 control-label"
																	style="text-align: right" for="id">短信服务提供商品: </label>
																<div class="col-sm-6">
																<s:select id="source" 
																	name="channel" value="%{paramsMap.channel}"
																	list="%{paramsMap.listChannel}" listKey="channel"
																	listValue="channel_name" cssClass="form-control"
																	headerKey="" headerValue="---请选择">
																</s:select>
																</div>
														</div>
														
														<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
															<label class="col-sm-4 control-label"  style="text-align:right" for="prdid">产品渠道:</label>
														  	<s:select id="prdid" 
																	name="product_id" value="%{paramsMap.product_id}"
																	list="%{paramsMap.productList}" listKey="product_id"
																	listValue="product_name" cssClass="col-sm-6"
																	headerKey="" headerValue="---请选择">
															 </s:select>
														</div>
														
														<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3" style="text-align:right">
																	<button class="btn btn-purple  no-border" type="button" name="btn-query" onclick="query_any()">
																		<i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
																		查询
																	</button>
																	&nbsp;&nbsp;&nbsp;
																	<button class="btn btn-grey  no-border" type="reset">
																		<i class="ace-icon fa fa-undo icon-on-right bigger-110"></i>
																		重置
																	</button>
														  </div>
											
												</div><!-- /.widget-main -->
										</div><!-- /.widget-body -->
								</div><!-- /.widget-box -->
							</div><!-- /.col-sm-12 -->
						</div><!-- /.row -->
								 
								 <div class="row">
									<div class="col-xs-12">
										<a href="javascript:void(0)" class="btn btn-success btn-small"  id="output2" onclick="loadlist()">导出CSV</a>&nbsp;&nbsp;&nbsp;
									</div><!-- /.col -->
								</div><!-- /.row -->
								 
								 
						<hr style="display:none;" id="delete_hr">
							<div class="row">
								<div class="col-xs-12">
								<!-- <a href="javascript:void(0)" class="btn btn-success btn-small" style="display:none" id="output" onclick="edit(-1)">新增</a> -->
									<table id="jquery-table" class="table table-striped table-bordered table-hover">
									</table>
							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content-area -->
				</form>
			</div><!-- /.page-content -->
				
	<%@ include file="/common/common-js.jsp" %>
	
		<!-- inline scripts related to this page -->
	
	<script type="text/javascript" src="${ctx}/js/call_func.js"></script>
	<script type="text/javascript">
	
			function loadlist(){
				var chk_value =[];
				$('input[name="id"]:checked').each(function(){
					chk_value.push($(this).val());
				});
				var form = document.forms["queryForm"];
				form.action= ctx + "/phoneMessageStatistical/download.action?ids="+chk_value;
				form.submit();
			}
	
			//【查询】按钮Click事件
			 function query_any(){
				$("#output").removeAttr("style");
				$(".load_bg").removeAttr("style");
				$(".load_img").removeAttr("style");
				if(jqTable != null){jqTable.fnDraw();}
				else{loaddata();}
				 $("#delete_btn").attr("style","display:block");
				 $("#delete_hr").attr("style","margin-top:0px;margin-bottom:20px;display:block");
			  }
 
			var jqTable =null;
			var loaddata = function(){
				jQuery(function($) {
					jqTable = $('#jquery-table').dataTable( {
	                    //数据列控制（包括对应返回JSON属性名称，对应表头列索引位置、数据转换封装等）
					    "columnDefs": [
							{	  
					    		  "title":'日期',
					    	  	  "targets": [0],
					    	  	  "name": "cdate",
					    	  	  "data": "cdate",
					    	  	  "bSortable": true
					    	},
					    	{	  
					    		  "title":'全部数',
					    	  	  "targets": [1],
					    	  	  "name": "totalCount",
					    	  	  "data": "totalCount",
					    	  	  "bSortable": true
					    	},
					    	{
					    		  "title":"成功数",  //列名
					    		  "name": "successCount",
					    		  "data": "successCount",   //JSON返回属性
					    		  "targets": [2], //第几列
					    		  "bSortable": true
					    	},
					    	{
					    		  "title":"失败数",  //列名
					    		  "name": "faildCount",
					    		  "data": "faildCount",   //JSON返回属性
					    		  "targets": [3], //第几列
					    		  "bSortable": true
					    	},
					    	{
					    		  "title":"短信提供商",  //列名
					    		  "name": "channel_name",
					    		  "data": "channel_name",   //JSON返回属性
					    		  "targets": [4], //第几列
					    		  "bSortable": true
					    	},
					    	{
					    		  "title":"产品名",  //列名
					    		  "name": "product_name",
					    		  "data": "product_name",   //JSON返回属性
					    		  "targets": [5], //第几列
					    		  "bSortable": true
					    	}
	                  	],
						"sAjaxSource": ctx + cmdList + "?rand=" + Math.random(),//数据源URL
						"fnServerData": function ( sSource, aoData, fnCallback ) {//从服务器请求数据
					   			var data = $('#queryForm').serializeObject();
								data.aoData = JSON.stringify(aoData);
								$.ajax({
									"dataType": 'json',
									"type": "POST",
									"url": sSource,
									"data":data,
									"success": function(resp){
										/* var aaData = resp.aaData;
										for(var i = 0; i < aaData.length; i++){
											//alert(aaData[i].extra_prsent)
											aaData[i].extra_prsent = aaData[i].extra_prsent + "%"
										} */
										fnCallback(resp);
										initListPage();
										$(".load_bg").attr("style","display:none");
										$(".load_img").attr("style","display:none");
									},
									"error": function(XMLHttpRequest, textStatus, errorThrown) {
										$(".load_bg").attr("style","display:none");
										$(".load_img").attr("style","display:none");
										alert('请求服务器错误,请刷新重试！！');//错误提示，包括服务器重启导致的session失效
									},
								});
						},
						"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
							//console.log("---" + nRow + "+++++" + aData["id"]);
							//=====================这里实现行双击事件======================//
							nRow.ondblclick = function() {
								window.open(ctx + cmdDetail + "?id=" + aData["id"]);
							}; 
						},
						"sScrollXInner": "100%",
						"sScrollY": "100%",//如果不设置，IE会有问题
						 "aaSorting": [[1,"desc"]] //初始化加载，默认按第几列排序、排序方式（列从0开始计算）
				    });
	
			});//end jquery初始化
		}
			
		jQuery(function(){
			
		    /** =============================[end 按钮点击事件 end] ============================== **/
		    
		    /** =============================[begin 联动下拉框] ============================== **/
		    $("#_seq_regionid").bind("change", function () { 
				var select_province = $(this).val();
		    	var citys = $("#_seq_cityid");
		    	citys.empty();
		        $.getJSON(ctx + "/life/region/getCityByProvinceid.action", {provinceid : select_province}, function (returnObj) {
		        citys.append("<option value='-1'>请选择</option>");
		           for (var i=0;i<returnObj.citys.length; i++) {
		        	   	var city = returnObj.citys[i];
		        	   	citys.append("<option value='" + city.id + "'>" + city.name + "</option>");
		    	   }
		        }).error(function(){//失败处理
	 		    	$(".load_bg").attr("style","display:none");
					$(".load_img").attr("style","display:none");
					alert('请求服务器错误,请刷新重试！！');//错误提示，包括服务器重启导致的session失效
	 			});
			});
		});
			
	    function doAdd() {	
			window.open(ctx+cmdAdd);
	    }
	    
	    function del(id) {	
	    	var answer = window.confirm("是否确认删除这个数据源？");
	    	if(answer){
	    	 	$.getJSON(ctx + cmdDel + "?id=" + id, function (returnObj) {
	    			jqTable.fnDraw();
		        }).error(function(){//失败处理
	 		    	$(".load_bg").attr("style","display:none");
					$(".load_img").attr("style","display:none");
					alert('请求服务器错误,请刷新重试！！');//错误提示，包括服务器重启导致的session失效
	 			});
	    	 }
   		}
	    
	    function edit(id) {	
	    	var titleinfo = "修改CPS活动投资历史配置" ;
	    	if(id == -1){
	    		titleinfo = "新增CPS活动投资历史配置" ;
	    	}
	    	openDialogWithRand(cmdGet + "?id=" + id,800,800,titleinfo,function (data){jqTable.fnDraw();});
   		}
	    
	    jQuery(function($) {
			  initDate();
			});
		  function initDate() {
				var beforedate = GetDateStr(-2);
				var today = GetDateStr(0);
				if($.isBlank($("#startTime").val())) {
					jQuery("#startTime").val(beforedate);
				}
				if($.isBlank($("#endTime").val())) {
					jQuery("#endTime").val(today);
				}
				
			}
		  function GetDateStr(AddDayCount) {
				var dd = new Date();
				dd.setDate(dd.getDate() + AddDayCount);//获取AddDayCount天后的日期
				var y = dd.getFullYear();
				var m = dd.getMonth() + 1;//获取当前月份的日期
				var d = dd.getDate();
				return y + "-" + m + "-" + d;
			}
	    
		  jQuery(function() {
				$(".date-picker").datepicker({
					autoclose : true
				}).next().on(ace.click_event, function() {
					$(this).prev().focus();
				});
				/** =============================[end 按钮点击事件 end] ============================== **/

				/** =============================[begin 联动下拉框] ============================== **/
				$("#source").combobox();
				$("#prdid").combobox();
			});
		</script>
</body>
</html>
